<!DOCTYPE HTML>
<html>
<head>
    <title>旅行</title>
    <link rel="icon" href="../images/3.jpg" type="image/x-icon"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Travelia Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href="../css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <!-- Custom Theme files -->
    <link href="../css/style.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="../css/styleMap.css"/>
    <link rel="stylesheet" href="../css/flexslider.css" type="text/css" media="screen"/>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/page.js" type="text/javascript"></script>
    <script src="../js/echarts.min.js" type="text/javascript"></script>
    <!--/script-->
    <script type="text/javascript" src="../js/move-top.js"></script>
    <script type="text/javascript" src="../js/easing.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
            });
        });
    </script>

    <script>
        var init = function (e) {
            $("#map_container").html("");
            var center = new qq.maps.LatLng(39.916527, 116.397128);
            var map = new qq.maps.Map(document.getElementById('map_container'), {
                center: center,
                zoom: 13
            });
            var marker = new qq.maps.Marker({
                position: center,
                map: map
            });
            //添加到提示窗
            var info = new qq.maps.InfoWindow({
                map: map
            });

            if (e != null) {
                for (var i = 0; i < e.length; i++) {
                    (function (n) {
                        var marker = new qq.maps.Marker({
                            position: e[n],
                            map: map
                        });
                        qq.maps.event.addListener(marker, 'click', function () {
                            info.open();
                            info.setContent('<div style="text-align:center;white-space:' +
                                'nowrap;margin:10px;">这是第 ' +
                                n + ' 个标注</div>');
                            info.setPosition(e[n]);
                        });
                    })(i);
                }

                //获取标记的点击事件
                qq.maps.event.addListener(marker, 'click', function () {
                    // info.open();
                    // info.setContent('<div style="text-align:center;white-space:nowrap;'+
                    //     'margin:10px;">单击标记</div>');
                    // info.setPosition(center);
                    window.open("https://www.baidu.com/s?wd=%E5%BE%BD%E6%9D%AD%E5%8F%A4%E9%81%93&rsv_spt=1&rsv_iqid=0xe955ed1c0004f5a0&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=9&rsv_sug1=11&rsv_sug7=100&rsv_t=589efsKvHBMaWQy9j7QTwi6iZgCHAk6hHVJRtma828vz1%2FCtpm6QjDZU%2B76VgJ0%2FIPnM")
                });
            }
        }
    </script>

</head>
<body onload="init()">
<!--start-home-->
<div id="home" class="header">
    <div th:replace="common :: navbar"></div>

    <div class="banner two">
        <div class="container">
            <h2 class="second">VR导览</h2>
        </div>
    </div>
</div>

<div class="row" style="margin-top: 50px; margin-right: auto">
    <div class="col-md-4 col-md-offset-1" style="border: #def2d8 solid 1px;background-color: #f8f8f6">
        <div class="row">
            <div class="col-md-3" style="margin-left: 5px;">
                <div class="row">
                    <h4>今日总数：<span style="color: #ef8208">5000</span></h4>
                </div>
                <div class="row">
                    <div class="col-md-6" style="background-color: #00bcd4;">女</div>
                    <div class="col-md-2" style="background-color: #3c763d">男</div>
                </div>
            </div>
            <div class="col-md-6">
                <div id="main" style="width: 300px;height:200px;"></div>
            </div>
        </div>
    </div>
    <div class="col-md-3"
         style="border: #def2d8 solid 1px;background-color: #f8f8f6;height: 202px;border-left: none;border-right: none;">
        <div class="row">
            <div class="col-md-6">
                <div style="background-color:#EF6C42;">
                    广东
                </div>
                <div style="background-color:#FE9901;width:76%;">
                    上海
                </div>
                <div style="background-color:#C0C0C0;width:52%;">
                    北京
                </div>
                <div style="background-color:#2E4354;width:27%;color: white">
                    深圳
                </div>
                <div style="background-color:#EE7E56;width:27%;">
                    合肥
                </div>
                <div style="background-color:#32CCFE;width:27%;">
                    南京
                </div>
                <div style="background-color:#A0A1A3;width:27%;">
                    武汉
                </div>
                <div style="background-color:#3F91CB;width:27%;">
                    成都
                </div>
            </div>
            <div class="col-md-6">
                <div style="background-color: #32CCFE;border-radius: 4px;color: white;width: 140px;">
                    <div style="height: 35px;text-align: center;">进港</div>
                    <div style="height: 35px;text-align: center;">12000人</div>
                </div>
                <div style="background-color: orange;border-radius: 4px;color: white;width: 140px;margin-top: 15px;">
                    <div style="height: 35px;text-align: center;">出港</div>
                    <div style="height: 35px;text-align: center;">8000人</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3" style="border: #def2d8 solid 1px;background-color: #f8f8f6">
        <div id="main1" style="width: 300px;height:200px;"></div>
    </div>
</div>

<div class="row" style="margin-top: 50px; margin-right: auto">
    <div class="col-md-3 col-md-offset-1">
        <div class="mapContainer" id="map">
            <div class="cubes" id="cubeBox"></div>
        </div>
    </div>
    <div class="col-md-7">
        <div class="map" id="map_container" style="height: 390px;"></div>
    </div>

</div>

<!--map-->

<div class="copy" style="margin-top: 50px;">
    <div th:replace="common :: footer"></div>
</div>
<!--footer-->
<!--start-smoth-scrolling-->
<script type="text/javascript">
    $(document).ready(function () {
        $().UItoTop({easingType: 'easeOutQuart'});

    });
</script>
<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover"
                                                                         style="opacity: 1;"> </span></a>


</body>

<script>
    $(function () {
        $(".s1").click(function () {
            var latlngs = [
                new qq.maps.LatLng(39.91474, 116.37333),
                new qq.maps.LatLng(39.91447, 116.39336),
                new qq.maps.LatLng(39.90884, 116.41306)
            ];
            init(latlngs);
        });


        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '渠道来源',
                // subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['飞猪', '携程', '途牛', '去哪儿', '旅行社']
            },
            series: [
                {
                    name: '渠道来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '飞猪'},
                        {value: 310, name: '携程'},
                        {value: 234, name: '途牛'},
                        {value: 135, name: '去哪儿'},
                        {value: 1548, name: '旅行社'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    })

</script>

<script>
    $(function () {
        var myChart = echarts.init(document.getElementById('main1'));

        var option = {
            title: {
                text: '酒店入住',
                // subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['境内', '境外']
            },
            series: [
                {
                    name: '酒店入住',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '境内'},
                        {value: 1548, name: '境外'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    })
</script>
</html>